<template>
  <div>
    <div class="card order-cell">
      <div class="order-cell_label">促销</div>
      <div class="order-cell_value" w-full>
        <div flex flex-a-c flex-j-sb @click="handleClickCard('promotion')">
          <promotion v-if="props.res" :res="props.res.promotionMap" />
          <nut-icon name="more-s"></nut-icon>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="order-cell">
        <div class="order-cell_label">已选</div>
        <div class="order-cell_value" @click="selectorOpen()" v-if="props.sku">{{ props.sku.spec.specName }}，{{
          props.sku.spec.specValue }}
        </div>
      </div>
      <div class="order-cell">
        <div class="order-cell_label">送至</div>
        <div class="order-cell_value" @click="handleClickCard('arrived')">
          <div v-if="defaultAddress && addressList.length">
            {{ defaultAddress.consigneeAddressPath ? defaultAddress.consigneeAddressPath.split(',').join('-') : '' }}
          </div>
          <div v-if="!addressList.length">暂无地址</div>
        </div>
      </div>
    </div>
    <!-- 促销部分 -->
    <nut-popup :closeable="true" position="bottom" round :custom-style="{ height: '800rpx' }" v-model:visible="show">
      <div flex flex-a-c flex-j-c my-16px text-32rpx>
        {{ popupTips[currentShow] }}
      </div>
      <promotionDetail v-if="currentShow === 'promotion'" :res="props.res.promotionMap" />
      <div p-32rpx v-if="currentShow === 'arrived'">
        <nut-radio-group @change="changeAddr" v-model="addr">
          <nut-radio :custom-style="{ padding: '20rpx 0' }" v-for="item in addressList" :label="item.id" size="large">
            {{ item.consigneeAddressPath ? item.consigneeAddressPath.split(',').join('-') : '' }}
          </nut-radio>
        </nut-radio-group>
        <empty text="暂无收货地址" mb-150rpx v-if="!addressList.length" />
        <nut-button v-if="!addressList.length" mt-50rpx block type="primary"
          @click="$navigateTo('/pages/mine/address/manager')">添加地址</nut-button>
      </div>
    </nut-popup>
  </div>
</template>

<script setup lang="ts">
import promotionDetail from '@/components/goods/template/promotion/goods-promotion-detail.vue';
import promotion from '@/components/goods/template/promotion/goods-promotion.vue';
import Address from '@/components/address/instance';
import empty from '@/components/empty/index.vue';
import { isLogin } from '@/utils/filters';
const show = ref<boolean>(false)
const defaultAddress = ref<any>('')
const popupTips = ref<any>({
  'promotion': '优惠',
  'selected': '已选',
  'arrived': '选择地址'
})
const emit = defineEmits(['click'])
const addr = ref<any>('')
const currentShow = ref<string>('')
const addressList = ref<any>([])
const props = defineProps<{
  res: any,
  sku: any
}>()
const addressInstance = new Address({
  pageSize: 100,
  pageNumber: 1,
})

// 点击卡片
function handleClickCard(type: string) {
  currentShow.value = type
  show.value = true
}

async function fetchAddress() {
  const res = await addressInstance.fetch()
  if (res.data.success) {
    addressList.value = res.data.result || []

     defaultAddress.value = res.data.result?.length ? 
        (res.data.result.find((item: any) => item.isDefault) || res.data.result[0]) : null
    addr.value = defaultAddress.value?.id
  }
}

function changeAddr(val: any) {
  emit('click', {
    addr: val
  })
  defaultAddress.value = (addressList.value || []).find((item: any) => item.id === val)

  show.value = false
}

function selectorOpen() {
  emit('click', {
    'skuSelectorOpen': true,
  })
}

onMounted(() => {
  if (isLogin("auth")) {
    fetchAddress()
  }
})
</script>

<style scoped lang="scss">
.order-cell {
  margin: 20rpx 0;
  display: flex;
  align-items: center;
  padding: 32rpx;

  font-size: 24rpx;

  &_label {
    font-weight: bold;
    color: #000;
    font-size: 24rpx;
    min-width: 120rpx;
  }

  &_value {
    text-align: left;
    flex: 1
  }
}
</style>
